Halari – Business And Corporate Multi Purpose Template.

Introduction

First of all, Thank you so much for purchasing this Halari template and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this item. You may learn basics here and here.

Getting Started

Requirements

You will need the following sofwares to customize this template.

1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)

Include Files

• HTML
• CSS
• JS

Pages

• index.html
• about.html
• blog.html
• contact.html
• layout_2.html
• layout_3.html
• layout_4-us.html
• portfolio.html
• pricing.html
• pricing_2.html
• pricing_3.html
• service.html
• service_2.html
• team.html

Bootstrap (v4.1.3) Grid System

If you want to use three column.

<div class="container">										
	<div class="row">										
		<div class="col-lg-4  col-md-6">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

If you want to use four column.

<div class="container-fluid">										
	<div class="row">										
		<div class="col-lg-3  col-md-6  col-12">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900);

<nav class="navbar navbar-expand-lg navbar-light">
	<a class="navbar-brand" href="index.html"><span class="blue">H</span>alari<span class="green">.</span></a>
	<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#Navigation" aria-controls="Navigation" aria-expanded="false" aria-label="Toggle navigation"><span></span><span></span><span></span></button>
	<div class="collapse navbar-collapse" id="Navigation">
		<ul class="navbar-nav ml-auto">
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					Home
				</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<a class="dropdown-item" href="index.html">Home 1</a>
					<a class="dropdown-item" href="layout_2.html">Home 2</a>
					<a class="dropdown-item" href="layout_3.html">Home 3</a>
					<a class="dropdown-item" href="layout_4.html">Home 4</a>
				</div>
			</li>
			<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="service.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					Services
				</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<a class="dropdown-item" href="service.html">Services 1</a>
					<a class="dropdown-item" href="service_2.html">Services 2</a>
				</div>
			</li>
			<li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
			<li class="nav-item"><a class="nav-link" href="team.html">Team</a></li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					Pricing
				</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<a class="dropdown-item" href="pricing.html">Pricing 1</a>
					<a class="dropdown-item" href="pricing_2.html">Pricing 2</a>
					<a class="dropdown-item" href="pricing_3.html">Pricing 3</a>
				</div>
			</li>
			<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
			<li class="nav-item"><a class="nav-link" href="contact.html">Get in Touch</a></li>
		</ul>
	</div>
</nav>

<button class="subscribe_btn radial-out">Subscribe Now</button>

	<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico" />
	<!-- Bootstrap -->
	<link href="assets/css/bootstrap.css" rel="stylesheet">
	<!-- font awesome -->
	<link href="assets/css/font-awesome.css" rel="stylesheet">
	<!-- aos -->
	<link href="assets/css/aos.css" rel="stylesheet">
	<!-- owl carousel -->
	<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
	<!-- style sheet -->
	<link href="assets/css/style.css" rel="stylesheet">
	<!-- color style sheet -->
	<link id="skin-switcher-css" href="assets/css/color-1.css" rel="stylesheet">
	<!-- responsive style sheet -->
	<link href="assets/css/responsive.css" rel="stylesheet">

	<!-- jquery -->
	<script src="assets/js/jquery-3.1.0.min.js"></script>
	<!-- popper js -->
	<script src="assets/js/popper.min.js"></script>
	<!-- bootstrap js -->
	<script src="assets/js/bootstrap.min.js"></script>
	<!-- owl carousel js -->
	<script src="assets/js/owl.carousel.js"></script>
	<!-- theme Whatsapp chat -->
	<script src="assets/js/whatsappchat.js"></script>
	<!-- aos js -->
	<script src="assets/js/aos.js"></script>
	<!-- color js -->
	<script src="assets/js/change_color.js"></script>
	<!-- script js -->
	<script src="assets/js/script.js"></script>

Color Customization

There are six type of couple colors css file(in css folder)

color-1.css = if you want to use this color to add only "color-1.css" in html file with style.css, responsive.css and layout css file which you want.

color-2.css = if you want to use this color to add only "color-2.css" in html file with style.css, responsive.css and layout css file which you want.

color-3.css = if you want to use this color to add only "color-3.css" in html file with style.css, responsive.css and layout css file which you want.

color-4.css = if you want to use this color to add only "color-4.css" in html file with style.css, responsive.css and layout css file which you want.

color-5.css = if you want to use this color to add only "color-5.css" in html file with style.css, responsive.css and layout css file which you want.

color-6.css = if you want to use this color to add only "color-6.css" in html file with style.css, responsive.css and layout css file which you want.

Custom Colors

Halari theme use couple colors not gradient. you need to change only color-1.css file.

For example : you can change color red and green. to replace with #5076db and #5bc86d.

For example : you can change color #FF0000 and #008000. to replace with #5076db and #5bc86d.

Free Resources

• Google Fonts
• Font Awesome Icons
• Owl Carousel
• https://www.pexels.com/
• https://www.freepik.com/